<template>
  <div class="directors">
    <div class="appPc" v-if="$store.state.screenWidth > 1300">
      <div class="backdrop">
        <img
          src="https://ir3.anbio.xyz/uploads/image/6528681748657426.jpg"
          alt=""
        />
        <h1 class="title">Management</h1>
      </div>

      <div class="block">
        <div
          class="list"
          v-for="(item, index) in list"
          :key="index"
          @click="directiorsHit(item, index)"
        >
          <div class="img">
            <img :src="item.img" alt="" />
          </div>
          <div class="name">{{ item.title }}</div>
          <div class="text">{{ item.text }}</div>
          <div class="more">
            Read More
            <img src="../../assets/right.png" alt="" />
          </div>
        </div>
      </div>

      <div class="dislog">
        <!--弹出框-->
        <el-dialog
          :visible.sync="directiorsShow"
          width="60%"
          :before-close="directiorsClose"
        >
          <div class="dislog-popup">
            <h5 class="header">{{ listObj.title }}</h5>
            <h5 class="title">{{ listObj.text }}</h5>
            <div class="text">
              <p>
                {{ listObj.popup }}
              </p>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>

    <div class="appH5" v-else>
      <div class="popup-lint"></div>

      <div class="backdrop">
        <img
          src="https://ir3.anbio.xyz/uploads/image/6528681748657426.jpg"
          alt=""
        />
        <h1 class="title">Management</h1>
      </div>

      <div class="block">
        <div
          class="list"
          v-for="(item, index) in list"
          :key="index"
          @click="directiorsHit(item, index)"
        >
          <div class="img">
            <img :src="item.img" alt="" />
          </div>
          <div class="name">{{ item.title }}</div>
          <div class="text">{{ item.text }}</div>
          <div class="more">
            Read More
            <img src="../../assets/right.png" alt="" />
          </div>
        </div>
      </div>

      <div class="dislog">
        <!--弹出框-->
        <el-dialog
          :visible.sync="directiorsShow"
          width="95%"
          :before-close="directiorsClose"
        >
          <div class="dislog-popup">
            <h5 class="header">{{ listObj.title }}</h5>
            <h5 class="title">{{ listObj.text }}</h5>
            <div class="text">
              <p>
                {{ listObj.popup }}
              </p>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      directiorsShow: false,
      list: [
        {
          title: "Yingkai Xu",
          text: "Chief Executive Officer and Chairman of the Board and Director",
          img: require("../../assets/common/5.png"),
          popup: `Mr. Xu has served as our Director, Chairman of the Board, and Chief Executive Officer. From September 1999 to September 2002, Mr. Xu worked as a quality engineer and process engineer at the Wuxi Diesel Engine Plant of FAW Group Co., Ltd., where he performed engine component failure analysis and treatment and casting process design. From October 2002 to February 2006, Mr. Xu acted as a supplier quality engineer, product development engineer, and project manager at Tin Cummins Turbocharger Technology Co., where he performed supplier, new product project development, and general management. From March 2006 to May 2013, Mr. Xu worked as the vice president at Wuxi Yelong Precision Machinery Co., responsible for the company’s overall operation. From June 2013 to September 2015, Mr. Xu was the General Manager of Wuxi Ruiming Mould Manufacturing Factory, in charge of the general operations. Since October 2015, Mr. Xu has served as the General Manager of Wuxi Mingteng Mould, in charge of overall company operations, critical customer maintenance, financial reporting, and annual business plans. Mr. Xu obtained his bachelor’s degree from the School of Materials Science and Engineering at Jilin University of Technology in July 1999.`,
        },
        {
          title: "Fengting Yin",
          text: "Chief Financial Officer",
          img: require("../../assets/common/6.png"),
          popup: `Ms. Yin has served as our Chief Financial Officer since September 20, 2022. Ms. Yin has more than 20 years of finance, accounting, and taxation experience. Since August 2018, Ms. Yin has served as the Financial Manager of Wuxi Mingteng Mould, responsible for overall accounting treatment, financial data and voucher filing, and daily logistics management. From February 2012 to August 2018, Ms. Yin acted as the Financial Manager of Wuxi Kaiteng Mould Factory, in charge of the accounting treatment and tax declaration. From August 2011 to February 2012, Ms. Yin was the Financial Manager of Wuxi Hongqi Crane Co., Ltd., responsible for the accounting treatment. From October 2008 to July 2011, Ms. Yin worked as the Financial Manager at Wuxi Aierte Linear Motion Co., Ltd., responsible for the company’s accounting. From August 2003 to October 2008, Ms. Yin acted as a financial assistant at Wuxi Huajin Engineering Co., Ltd., where she performed accounting and tax declarations. From July 2000 to July 2003, Ms. Yin worked as a cashier at the Wuxi Sanyi Communication Technology Co., Ltd., where she was in charge of corporate taxation and reimbursement work. Ms. Yin obtained her college degree from the School of Accounting at Wuxi Radio and Television University in September 2004.`,
        },
        {
          title: "Jingzhu Ding",
          text: "Director",
          img: require("../../assets/common/7.png"),
          popup: `Ms. Ding has served as our Director since November 9, 2023. Ms. Ding has been the Finance Director at Wuxi Mingteng Mould since August 2018, where she oversees the Wuxi Mingteng Mould’s comprehensive financial accounting, develops and implements financial regulations and procedures, interprets related regulations, analyzes financial transactions, and monitors budget execution. Her responsibilities also include auditing original documents, managing daily accounting tasks, reviewing payroll and bonus distribution, ensuring the accuracy of cash and bank deposits, conducting periodic warehouse inventory checks, controlling fund budgets, and auditing accounts payable and expense reimbursements. Ms. Ding obtained her college degree in Software Development and Utilization from Wuxi Radio and Television University in June 2005.`,
        },
      ],
      listObj: {},
    };
  },
  created() {
    this.scrollTotap();
  },
  methods: {
    scrollTotap() {
      window.scrollTo(0, 0);
    },
    directiorsHit(item, index) {
      this.listObj = item;
      this.directiorsShow = true;
    },

    //-------
    directiorsClose() {
      this.directiorsShow = false;
    },
  },
};
</script>


<style lang="less" scoped>
.directors {
  .appPc {
    background: #eef4fc;

    .backdrop {
      height: 205px;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
      }

      .title {
        letter-spacing: 1.5px;
        color: #fff;
        position: relative;
        font-size: 48px;
        font-weight: bold;
      }
    }

    .block {
      padding: 90px 20px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      max-width: 1500px;
      margin: 0 auto;

      .list {
        width: calc((100% / 3) - 20px);
        margin-right: 30px;
        margin-bottom: 30px;
        padding: 30px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 20px;
        cursor: pointer;
        box-shadow: 0 4px 24px rgba(89, 95, 102, 0.25);
        transition: transform 0.2s, 0.2s;

        .img {
          width: 270px;
          height: 270px;
          margin: 0 auto;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .name {
          text-align: center;
          font-size: 30px;
          margin-top: 20px;
          color: #276cd3;
        }

        .text {
          font-size: 18px;
          margin-top: 15px;
          text-align: center;
          height: 70px;
        }

        .more {
          font-weight: 600;
          font-size: 20px;
          color: #97daf7;
          text-align: center;
          color: #276cd3;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 30px;
            height: 30px;
            margin-left: 10px;
          }
        }
      }

      .list:nth-child(3n + 3) {
        margin-right: 0;
      }

      .list:hover {
        transform: scale(1.01);
      }
    }

    .dislog {
      /deep/ .el-dialog__body {
        padding: 0;
      }

      /deep/ .el-dialog__header {
        padding: 0;
      }

      .dislog-popup {
        padding: 30px;
        box-sizing: border-box;
        background: #fff;

        .header {
          display: flex;
          align-items: center;
          border-bottom: 1px solid #eef4fc;
          font-weight: 600;
          font-size: 28px;
          margin-top: 0;
          margin-bottom: 20px;
          padding-bottom: 20px;
        }

        .title {
          font-size: 24px;
          font-weight: 600;
          margin-top: 0;
          margin-bottom: 20px;
        }

        .text {
          font-weight: 500;

          p {
            font-size: 18px;
            line-height: 25px;
          }
        }
      }
    }
  }

  .appH5 {
    background: #eef4fc;

    .backdrop {
      height: 200px;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
      }

      .title {
        letter-spacing: 1.5px;
        color: #fff;
        position: relative;
        font-size: 24px;
        font-weight: bold;
      }
    }

    .block {
      padding: 20px;
      box-sizing: border-box;
      .list {
        width: 100%;
        padding: 30px;
        box-sizing: border-box;
        margin-bottom: 30px;
        border-radius: 20px;
        background: #fff;

        .img {
          width: 170px;
          height: 170px;
          margin: 0 auto;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .name {
          text-align: center;
          font-size: 30px;
          margin-top: 20px;
          color: #276cd3;
        }

        .text {
          font-size: 18px;
          margin-top: 15px;
          text-align: center;
          height: 70px;
        }

        .more {
          font-weight: 600;
          font-size: 20px;
          color: #97daf7;
          text-align: center;
          color: #276cd3;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 30px;
            height: 30px;
            margin-left: 10px;
          }
        }
      }
    }

    .dislog {
      /deep/ .el-dialog__body {
        padding: 0;
      }

      /deep/ .el-dialog__header {
        padding: 0;
      }

      /deep/ .el-dialog__headerbtn {
        font-size: 7rem;
      }

      .dislog-popup {
        padding: 20px 10px;
        box-sizing: border-box;
        background: #fff;

        .header {
          display: flex;
          align-items: center;
          border-bottom: 1px solid #eef4fc;
          font-weight: 600;
          font-size: 22px;
          margin-top: 0;
          margin-bottom: 10px;
          padding-bottom: 10px;
        }

        .title {
          font-size: 18px;
          font-weight: 600;
          margin-top: 0;
          margin-bottom: 10px;
        }

        .text {
          font-weight: 500;

          p {
            font-size: 16px;
            line-height: 25px;
          }
        }
      }
    }
  }
}
</style>